<template>
  <div class="container">
    <div class="content">
      <h4>船型</h4>
      <div id="myChart" style="width:800px;height:600px"></div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      
      myChart: {},
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        series: [
          {
            name: "客户数量",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                position: "outside",
                formatter: "{b}: {c} \n ({d}%)"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                length: 30,
              }
            },
            data: []
          }
        ]
      }
    };
  },
  methods: {
    fetchData() {
      if (this.myChart.showLoading) {
        this.myChart.showLoading("default", { color: "#0177BF" });
      }
      axios.post(PATH + "Dashboard/customerCrewtype").then(res => {
        this.myChart.hideLoading();        
        if(!res.data.length){
          _g.toastMsg('normal','暂无数据');
        }
        this.myChart.setOption({
          series: [{data: res.data}]
        });
      });
    },
    drawChart() {
      this.myChart = this.$echarts.init(document.querySelector("#myChart"));
      this.myChart.setOption(this.option);
    },
  },
  created() {
      this.fetchData();
  },
  mounted() {
    this.drawChart();
    this.myChart.showLoading("default", { color: "#0177BF" });
    this.myChart.on("click", params => {
      router.push("/dashboard/customerCrewtypeDetail/" + params.name);
    });
  }
};
</script>
<style scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.content > h4 {
  text-align: center;
  border-bottom: 1px solid #f0f2f3;
  line-height: 40px;
}
#myChart {
  margin: 50px auto;
}
</style>
